<template>
  <div class="login">
    <div class="login__div--container">
      <div class="login__div--aside">
        <h1 class="title">欢迎回来</h1>
        <el-form
          :model="loginForm"
          status-icon
          :rules="rules"
          ref="loginForm"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              type="text"
              placeholder="4到16位(字母，数字，下划线)"
              v-model="loginForm.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              placeholder="6到20位(字母，数字，下划线)"
              v-model="loginForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="验证码" prop="captcha">
            <el-input
              type="text"
              v-model="loginForm.captcha"
              autocomplete="off"
              @keyup.native.enter="submitForm('loginForm')"
              placeholder="请输入验证码"
            ></el-input>
          </el-form-item>

          <span
            class="el__span--captcha"
            v-html="captchaSVG"
            @click="change_CaptchSVG"
            >233</span
          >

          <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <div class="login__div--pic"></div>
    </div>

    <video
      src="../../assets/ys.mp4"
      class="login__video--bgv"
      autoplay
      muted
      loop
    ></video>
  </div>
</template>

<style lang="scss" scoped>
.login {
  position: relative;
  overflow: hidden;
  height: 100%;
  .login__div--container {
    position: absolute;
    z-index: 999;
    width: 1000px;
    height: 600px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    display: flex;

    .login__div--aside {
      width: 600px;
      background: rgba(0, 0, 0, 0.3);
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      border-radius: 6px 0 0 6px;

      .title {
        color: #fff;
        margin: 0;
      }

      ::v-deep .demo-ruleForm {
        width: 80%;
        padding-bottom: 50px;

        .el-form-item--feedback {
          text-align: center;

          .el-form-item__label {
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: 16px;
          }

          .el__div--captcha {
            height: 80px;
          }

          .el-form-item__content {
            .el-button--primary {
              width: 100%;
              margin-top: 22px;
              background-image: linear-gradient(
                90deg,
                #15dbe9 0%,
                #3e8fff 100%
              );
            }

            .el-input {
              .el-input__inner {
                border: none;
                background-color: transparent;
                border-bottom: 1px solid #eee;
                color: #fff;
              }
            }
          }
        }

        .el__span--captcha {
          display: block;
          height: 44px;
          background-color: #fff;
          text-align: center;
          cursor: pointer;
        }
      }
    }

    .login__div--pic {
      width: 400px;
      height: 100%;
      background: url(https://images7.alphacoders.com/111/1114873.jpg) 26%/cover;
      overflow: hidden;
      border-radius: 0 6px 6px 0;
      opacity: 0.9;
    }
  }
  .login__video--bgv {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    object-fit: fill;
  }
}
</style>

<script>
// api封装的方法
import { captcha, verifiCation, login, getMenuList } from "../../api";


export default {
  data() {
    var validateUsername = (rule, value, callback) => {
      // 用户名验证
      let reg = /^[a-zA-Z0-9]{3,10}$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("用户名不合法"));
      }
    };
    var validatePassword = (rule, value, callback) => {
      // 密码验证
      let reg = /^[a-zA-Z0-9]{3,10}$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("密码格式不正确"));
      }
    };
    var validateCaptcha = (rule, value, callback) => {
      if (value === "" || value.length != 5) {
        callback(new Error("请输入正确的验证码"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: "",
        password: "",
        captcha: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        captcha: [{ validator: validateCaptcha, trigger: "blur" }],
      },
      // 储存请求过来的验证码
      captchaSVG: "",
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        // valid 为 true 代表本地校验通过
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "少女祈祷中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          // 开始校验验证码
          verifiCation(this.loginForm.captcha).then((res) => {
            if (res.data.state) {
              // 验证码通过加载动画
              const loading = this.$loading({
                lock: true,
                text: "少女祈祷中...",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
              });

              // 继续检验用户名和密码
              const { username, password } = this.loginForm;
              login(username, password).then((res) => {
                if (res.data.state) {
                  // 登录成功后续操作
                  // 1、存储用户token
                  let token = res.data.token;
                  localStorage.setItem("token", token);

                  // 获取用户权限
                  this.$store.dispatch("SET_SIDEMENU");

                  // 用户信息存到本地存储
                  localStorage.setItem("userInfo", JSON.stringify(res.data));
                  console.log(res);

                  // 跳转页面
                  this.$router.push("/welcome");

                  // 提示登陆成功
                  this.$message.success("登录成功，正在跳转页面");

                  // 结束动画
                  loading.close();
                } else {
                  this.$message.error("账号密码错误");
                  loading.close();
                }
              });
            } else {
              this.$message.error("验证码有误");
              this.getCaptcha();
              this.loginForm.captcha = "";
              loading.close();
            }
          });
        } else {
          this.$message.error("账号密码有误");
          return false;
        }
      });
    },
    getCaptcha() {
      captcha().then((res) => {
        this.captchaSVG = res.data.img;
      });
    },
    change_CaptchSVG() {
      this.getCaptcha();
    },
  },
  mounted() {
    this.getCaptcha();
    this.loginForm.username = "admin";
    this.loginForm.password = "admin";
  },
};
</script>
